<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
           <meta name="author" content="Zhang Cheng">
        <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
		<title></title>
		<script src="js/vue.js" ></script>
		<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">
						添加品牌
					</h3>
				</div>
				<div class="panel-body form-inline">
					<label>
						id:
						<input type="text" class="form-control" v-model="id"/>
					</label>
					
					<label >
						name:
						<input type="text" class="form-control" v-model="name"/>
					</label>
					<!--
                    	作者：offline
                    	时间：2019-08-24
                    	描述：绑定函数可以没有小括号，有小括号可以给函数传参数
                    -->
					 <input type="button" id="" value="添加"  class="btn btn-primary"@click="add"/>
					 
					 
					 <label >
					<!--
                    vue当中所有的指令都以V-开头	
                    -->	
					 	
					 	
						搜索名称关键字:
						<input type="text" class="form-control" v-model="keywords" v-focus v-color="'#009966'"/>
					</label>
				</div>
			</div>
			
			
			
			
			<table class="table table-bordered table-hover table-striped">
				<thead>
					<tr>
						<th>id</th>
						<th>name</th>
						<th>ctime</th>
						<th>opetration</th>
					</tr>
				</thead>
				
				
				<tbody >
					<tr v-for="(item,index) in search(keywords)":key="item.id">
						<td>{{item.id}}</td>
						<td v-text='item.name'>{{}}</td>
						<!--
                    		过滤器调用时候的格式 {{date | 过滤器的名称}}
                        -->
						<td>{{item.ctime | datepre()}}</td>
						<td><a href="#" @click.prevent="del(item.id)" >删除</a></td>
					</tr>
				</tbody>
				
			</table>
			
			
			
		</div>
		<script>
			Vue.filter('datepre',function(date,pattern = ''){
					//根据给的时间给出特定的时间 
					var dt = new Date(date);
					
					
					//得到正确的时间
					
					var year = dt.getFullYear();
					var month = dt.getMonth() + 1;
					var day = dt.getDate();
					
					//return `${year}-${month}-${day}`//模板字符串
					
					
					if(pattern.toLowerCase()==='yyyy-mm-dd'){
						return `${year}-${month}-${day}`;
					}else{
						var hours = dt.getHours();
						var minutes = dt.getMinutes() + 1;
						var seconds = dt.getSeconds();
						return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
					}
				});
				
				
				
			//自定义指令 全局的不用带S
			//其中参数1 是指令的名称，在定义的时候指令的名称前面不需要加v-前缀，但是在调用的时候要在前面加上v-前缀
			//参数二是一个对象，这个对象身上有一些需要实现的方法
			 Vue.directive('focus', {
	            //注意在每个函数中，第一个参数永远是el表示被绑定了指令的哪个元素，这个el是元素的js对象  
	            bind: function(el){
	            	//每当指令绑定到元素上的时候，会立即执行，只执行一次
	                //在元素绑定了指令时候，还没有插入到DOM中去，这时候调用focus方法没有作用。因为这个元素只有在插入DOM之后才能获取焦点。
	
	            },
	            inserted: function(el){// 元素插入到DOM中的时候，会执行inserted函数，触发一次
	            	//和行为有关的应该在这里设置
	                el.focus()
	            },
	            updated(el) {  //当VNode更新的时候，会执行updated，可能会触发多次
	                
	            }
	        })
			 Vue.directive('color',{
			 	 //样式只要通过指令绑定给了元素，不管这个元素有没有被插入到页面之中去，这个元素肯定有了一个内联的样式
            	 //和样式有关的，一般可以在bind中执行
			 	 bind:function(el , binding){
	                el.style.color = binding.value
	            },
			 })
			var app = new Vue({
				el:'#app',
				data:{
					id:'',
					name:'',
					keywords:'',
					list:[
						{ id : 1,name : "奔驰",ctime : new Date()},
						{ id : 2,name : "宝马",ctime : new Date()}
					
					]
				},
				methods:{
					add(){ //添加的方法
						//获取到data 的 id 和name 
						//把id 和 name 做成对象 
						//把对象 push 到 list里面
						
						
						let car = {id:this.id,name:this.name,ctime : new Date()}
						this.list.push(car);
						this.id = this.name = '';
					},
					del(id){
						//删除的方法
						//根据传入的参数，从list数组里删除相应的对象
						/*this.list.some((item,i)=>{
							if(item.id == id){
								
								this.list.splice(i,1);
								
								//终止循环
								return true;
							}
						})*/
						var index = this.list.findIndex( item => {
							if(item.id == id){
								return true;
							}
						})
						this.list.splice(index,1);
					},
					/*del(index){
						this.list.splice(index,1);
					},*/
					search(keywords){
						//根据关键字进行数据的过滤
						//一个新数组；
//						let newList = [];
//						this.list.forEach(item => {
//							if(item.name.indexOf(keywords)!= -1){
//								newList.push(item);
//							}
//						})
//						return newList
						//es6中的新方法 String.prototype.includes('要包含的字符串')
						//如果包含，返回ture，不包含返回false
						return newlist = this.list.filter(item => {
							if(item.name.includes(keywords)){
								return item;
							}
						})
					}
					//vue 当中可以使用过滤器来进行一部分文本格式化 ，过滤器可以用在mustache 插值表达式 和v-bind表达式，过滤器应该被添加在js尾部，由'管道'符指示
				
				}
				
			});
			
		</script>
	</body>
</html>